<template>
  <van-nav-bar
      :title="titleText"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view />
  </div>
  <van-tabbar route v-model="active">
    <van-tabbar-item replace to="/" icon="home-o" name="index">用户</van-tabbar-item>
    <van-tabbar-item replace to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item replace to="/my/page" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
import routes from "../config/route.ts";
const DEFAULT_TITLE = '伙伴匹配';
const titleText = ref<any>(DEFAULT_TITLE);

const router = useRouter();
const onClickLeft = () => router.back();
const onClickRight = () => {
  router.push("/search")
};
const active = ref("index");
/**
 * 使用路由切换标题
 */
router.beforeEach((to)=>{
  const toPath = to.path;
  const route = routes.find((route)=>{
    return route.path == toPath
  })
  titleText.value = route?.title ?? DEFAULT_TITLE;
})
</script>

<style scoped>
#content {
  padding-bottom: 120px;
}
</style>